<template>
    <div class="jianzhan-content">
        <Crumb name="流程申请审批配置"></Crumb>
        <div class="search">
            <el-button type="primary" icon="el-icon-plus" style="margin: 10px 0;float: left"
                       @click="openAdd">增加新审批流程
            </el-button>
        </div>
        <div class="content">
            <div class="table-wrapper">
                <el-table
                        row-key="id"
                        border
                        stripe
                        :data="processList"
                        style="width: 100%">
                    <el-table-column
                            prop="approveModule"
                            label="流程名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="firstApproverDesc"
                            label="初审"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="secondApproverDesc"
                            label="复审"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="thirdApproverDesc"
                            label="终审"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="edit" @click="openEdit(scope.row)">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <processDialog ref="dialog"
                       @confirm="submitForm"
                       :data="form"
                       :userList="userList"
                       :moduleList="moduleList"> </processDialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {getModuleList, addProcess, modProcess, getUserList,getProcessPerson} from "../../api/auth";
    import {ERROR_OK} from "../../util/config";
    import processDialog from './dialog/processDialog';

    export default {
        name: "approve-process",
        components: {
            Crumb,processDialog
        },
        data() {
            return {
                userList: [],
                moduleList: [],
                processList: [],
                form: {
                    id: '',
                    approveModuleId: '',
                    firstApprover: '',
                    secondApprover: '',
                    thirdApprover: ''
                }
            }
        },
        created() {
            this.getUserList();
            this.getModuleList();
            this.getProcessList()
        },
        methods: {
            async getProcessList(){
                const {status,data} = await getProcessPerson();
                if(status === ERROR_OK) {
                    this.processList = data;
                }
            },
            async submitForm(form) {
                const {id, approveModuleId, firstApprover, secondApprover, thirdApprover} = form;
                if (id) {
                    const {status, data} = await modProcess(id, approveModuleId, firstApprover, secondApprover, thirdApprover);
                    if (status === ERROR_OK) {
                        this.$message.success('修改成功');
                        this.getProcessList();
                        this.close();
                    }
                } else {
                    const {status, data} = await addProcess( approveModuleId, firstApprover, secondApprover, thirdApprover);
                    if (status === ERROR_OK) {
                        this.$message.success('新增成功');
                        this.getProcessList();
                        this.close();
                    }
                }
            },
            async getModuleList() {
                const {status, data} = await getModuleList();
                if (status === ERROR_OK) {
                    this.moduleList = data;
                }
            },
            close() {
                this.clear();
                this.$refs.dialog.close();
            },
            clear() {
                this.form = {
                    id: '',
                    approveModuleId: '',
                    firstApprover: '',
                    secondApprover: '',
                    thirdApprover: ''
                }
            },
            openAdd(){
                this.clear();
                this.$refs.dialog.open();
            },
            openEdit(row){
                this.form = row;
                this.$refs.dialog.open();
            },
            async getUserList() {
                const {status, data} = await  getUserList();
                if(status === ERROR_OK) {
                    this.userList = data
                }
            }
        },
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
</style>